<template>
    <div>
        <div>
            <el-row>
            <el-col :span="2">
            <div class="rightHead">
                <span style="margin-left:50px">商品分析</span>
                <span class="s2"></span>
            </div>
            </el-col>
            <el-col :span="2" :offset="19">
            <span class="exit">退出登录</span>
            </el-col>
            </el-row>
      </div>
      <el-row>
          <el-col :span="22"  :offset="1" >
              <el-col :span="24" style="background:#fff; margin-top:30px">
          <el-row style="margin-top:30px">
              <el-col :span="2" :offset="1">
                  <div class="selec-time">选择时段</div>
              </el-col>
              <el-col :span="6">
                <div class="block">
                    <el-date-picker
                    v-model="value2"
                    type="daterange"
                    align="left"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                    size="mini"
                    value-format="yyyy-MM-dd"
                    @change="xztime">
                    </el-date-picker>
                </div>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="4" :offset="1">
                  <div class="data-profile">数据概况</div>
              </el-col>
          </el-row>

          <el-row style="margin-top:30px">
              <el-col :span="4" :offset="9">
                  <span>在售商品数</span>
              </el-col>
              <el-col :span="4">
                  <span>下架商品数</span>
              </el-col>
              <el-col :span="4">
                  <span>总销量</span>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="8">
                  <h3>商品概况</h3>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="4" :offset="9">
                  <h3>{{sspt}}</h3>
              </el-col>
              <el-col :span="4">
                  <h3>{{xspt}}</h3>
              </el-col>
              <el-col :span="4">
                  <h3>{{allxl}}</h3>
              </el-col>
          </el-row>

          <el-row style="margin-top:30px">
              <el-col :span="4" :offset="9">
                  <span>待发货</span>
              </el-col>
              <el-col :span="4">
                  <span>支付数</span>
              </el-col>
              <el-col :span="4">
                  <span>退货数</span>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="8">
                  <h3>订单概况</h3>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="4" :offset="9">
                  <h3>{{dfht}}</h3>
              </el-col>
              <el-col :span="4">
                  <h3>{{playt}}</h3>
              </el-col>
              <el-col :span="4">
                  <h3>{{tht}}</h3>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="3">
                  <div style="margin-top:50px">
                      统计
                  </div>
              </el-col>
          </el-row>
          <el-row style="margin-top:30px">
              <el-col :span="10">
                  <div id="charts" style="width:400px;height:300px;"></div>
              </el-col>
              <el-col :span="10" :offset="2">
                  <div id="charts2" style="width:400px;height:300px;"></div>
              </el-col>
              <div :style="attr">暂无数据</div>
          </el-row>
      </el-col>
          </el-col>
      </el-row>
   </div>

</template>

<style lang="less">
  .data-profile{
      margin-top: 20px;
  }
  .rightHead{
    width: 1020px;
    background: white;
    height: 60px;
    line-height: 60px;
    text-align: left;
  }
  .s1{
    font-size: 18px;
  }
  .s2{
    display: inline-block;
    width: 750px;
  }
  .exit{
    display: inline-block;
    text-align: center;
    border: none;
    line-height: 60px;
    cursor: default;
  }
</style>

<script>
  var echarts = require('echarts');
  export default {
       data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value2: '',
        sspt:'',
        xspt:'',
        allxl:'',
        dfht:'',
        playt:'',
        tht:'',
        x:[],
        num:[],
        data:[],
        date:[],
        attr:'display:none'
      };
    },
    methods: {
        ssp(){
            this.$axios.post('/api/dftimetotalsj',{
                time1:this.value2[0],
                time2:this.value2[1]
            }).then((res) => {
                this.sspt = res.data.data[0].ssp
            })
        },
        xsp(){
            this.$axios.post('/api/dftimetotalxj',{
                time1:this.value2[0],
                time2:this.value2[1]
            }).then((res) => {
                this.xspt = res.data.data[0].xsp
            })
        },
        xl(){
            this.$axios.post('/api/dftimetotalxl',{
                time1:this.value2[0],
                time2:this.value2[1]
            }).then((res) => {
                if(!res.data.error){
                    this.allxl = res.data.data[0].allxl;
                }
            })
        },
        dfh(){
            this.$axios.post('/api/dftimetotaldfh',{
                time1:this.value2[0],
                time2:this.value2[1]
            }).then((res) => {
                if(!res.data.error){
                    this.dfht = res.data.data[0].dfh;
                }
            })
        },
        play(){
            this.$axios.post('/api/dftimetotalplay',{
                time1:this.value2[0],
                time2:this.value2[1]
            }).then((res) => {
                if(!res.data.error){
                    this.playt = res.data.data[0].play;
                }
            })
        },
        th(){
            this.$axios.post('/api/dftimetotalth',{
                time1:this.value2[0],
                time2:this.value2[1]
            }).then((res) => {
                if(!res.data.error){
                    this.tht = res.data.data[0].th;
                }
            })
        },
        ech(){
            this.x=[];
            this.num=[];
            var myChart = echarts.init(document.getElementById('charts'));
            myChart.setOption(
                {
                    title: {
                        text: '按系列销量统计'
                    },
                    tooltip: {},
                    legend: {
                        data:['销量']
                    },
                    xAxis: {
                        data: []
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: []
                    }]
                }
            );
            myChart.showLoading();
            this.$axios.post('/api/echardata',{
                time1:this.value2[0],
                time2:this.value2[1]
            }).then((res) => {
                if(!res.data.error){
                    for(let i=0; i<res.data.data.length; i++){
                        this.x.push(res.data.data[i].p_type);
                        this.num.push(res.data.data[i].num)
                    };
                    myChart.hideLoading();
                    myChart.setOption({
                        xAxis: {
                            data: this.x
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '销量',
                            data: this.num
                        }]
                    });
                }
            })
        },
        ech2(){
            
            var myChart2 = echarts.init(document.getElementById('charts2'));
            this.date = [];
            this.data = [];
            this.$axios.post('/api/echar2',{
                time1:this.value2[0],
                time2:this.value2[1]
            }).then((res) => {
                if(!res.data.error){
                    for(let i=0; i<res.data.data.length; i++){
                        let t = res.data.data[i].t_time.split(' ');
                        this.date.push(t[0])
                        this.data.push(res.data.data[i].num)
                    }
                }
                myChart2.setOption({
                    title: {
                        text: '销量走势'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.date
                    },
                    yAxis: {
                        boundaryGap: [0, '50%'],
                        type: 'value'
                    },
                    series: [
                        {
                            name:'成交',
                            type:'line',
                            smooth:true,
                            symbol: 'none',
                            stack: 'a',
                            areaStyle: {
                                normal: {}
                            },
                            data: this.data
                        }
                    ]
                }
                );
            })
             
            // setInterval(function () {
            //     myChart2.setOption({
            //         xAxis: {
            //             data: date
            //         },
            //         series: [{
            //             name:'成交',
            //             data: data
            //         }]
            //     });
            // }, 500);      
        },
        xztime(){
            this.xl(),
            this.ssp(),
            this.xsp(),
            this.dfh(),
            this.play(),
            this.th(),
            this.ech()
            this.ech2()
        }
    },
    mounted() {
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let jtime = `${year}-${month}-${day}`;
        let ztime = `${year}-${month}-${day - 3}`;
        this.value2 = [ztime,jtime];

        this.xl(),
        this.ssp(),
        this.xsp(),
        this.dfh(),
        this.play(),
        this.th();
        this.ech();
        this.ech2();
    },
  }
</script>